<script lang="ts" setup>
import 'element-plus/dist/index.css'
import {
    RemoveFilled,
    Plus,
    Minus,
    Message,
    Search,
    Star,
} from '@element-plus/icons-vue'
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { reactive } from 'vue'
const value = ref('');
const formInline = reactive({
  user: '',
  region: '',
  date: '',
})
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
// do not use same name with ref
const form = reactive({
  task: '',
  before_operation: '',
  after_operation: '',
  has_high_voltage_circuit_breaker: false,
  low_voltage_circuit_breaker: '',
  low_voltage_switch: '',
})

const onSubmit = () => {
  console.log('submit!')
}
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const min = ref(true)
// 使用计算属性来动态切换图标
const MinIcon = computed(() => (min.value ? Minus : Plus));
const onmin = () => {
  min.value = !min.value;
  console.log(min.value);
  console.log(min);
};
</script>

<template>
    <vue-draggable-resizable :drag-handle="'.drag-handle'">
        <div class="common-layout">
            <el-container>
            <el-header class="drag-handle">
                <img style="width: 20px; height: 20px;" src="" alt="">
                </img>
                <span >参数输入</span>
                <el-button size="small" type="primary" :icon="MinIcon" circle @click="onmin"/>
            </el-header>
            <el-main :style='{display:min? "unset":"none"}'>
              <el-tabs v-model="activeName" :stretch="true" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="台区" name="first">
                  <el-form :model="form" size="small" label-width="auto">
                    <el-form-item label="操作任务：">
                      <el-input type="textarea" v-model="form.task" autosize />
                    </el-form-item>
                    <el-form-item label="操作前：">
                      <el-select v-model="form.before_operation"   :teleported="false">
                        <el-option label="运行" value="shanghai" />
                        <el-option label="检修" value="beijing" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="操作后：">
                      <el-select v-model="form.after_operation"   :teleported="false">
                        <el-option label="运行" value="shanghai" />
                        <el-option label="检修" value="beijing" />
                      </el-select>
                    </el-form-item>
                    
                    <el-form-item label="低压刀闸数量：">
                      <el-select v-model="form.low_voltage_circuit_breaker"   :teleported="false">
                        <el-option label="1" value="1" />
                        <el-option label="2" value="2" />
                        <el-option label="3" value="3" />
                        <el-option label="4" value="4" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="低压开关数量：">
                      <el-select v-model="form.low_voltage_switch"   :teleported="false">
                        <el-option label="1" value="1" />
                        <el-option label="2" value="2" />
                        <el-option label="3" value="3" />
                        <el-option label="4" value="4" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="带高压刀闸 ">
                      <el-switch v-model="form.has_high_voltage_circuit_breaker" />
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="onSubmit">Create</el-button>
                      <el-button>Cancel</el-button>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>
                <el-tab-pane label="柱上开关" size="small" name="second">
                  <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="A">
                      <el-input v-model="formInline.user" placeholder="Approved by" clearable />
                    </el-form-item>
                    <el-form-item label="e">
                      <el-select
                        v-model="formInline.region"
                        placeholder="Activity zone"
                        clearable
                      >
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="Activity time">
                      <el-date-picker
                        v-model="formInline.date"
                        type="date"
                        placeholder="Pick a date"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="onSubmit">Query</el-button>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>
                <el-tab-pane label="电缆分接箱" name="third">Role</el-tab-pane>
                <el-tab-pane label="转供电" name="fourth">Task</el-tab-pane>
              </el-tabs>
            </el-main>
            </el-container>
        </div>
    </vue-draggable-resizable>
</template>

<style scoped>
.common-layout {
    border-radius:10px;
    /* border: 1px solid; */
    box-shadow: -2px 2px 2px 2px #888888;
    width:fit-content;
    height: fit-content;
    background-color: rgb(200, 217, 231);
}
.el-header{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #636466;
    cursor: move;
    align-items: center;
    user-select: none;
    -moz-user-select: -moz-none;
    background-color: aliceblue;
    border-radius:10px;
}
.el-main{
    background-color: #FFFFFF;
    border-radius:10px;
}
.demo-tabs > .el-tabs__content {
  margin: 0%;
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>